<template>
  <div class="section-two">
    <div class="border-row"></div>
    <div class="border-col"></div>
    
    <div class="section-header-two">最新用人单位</div>
    <div id="charts" ref="charts" :style="chartsDom" v-if="jz">
      <ul class="list-content">

        <swiper :options="swiperOption2" ref="mySwiper" v-if="listData.length" :style="chartsDom">
          <!-- slides -->
          <swiper-slide v-for="(item, index) in listData" :key="index">
            <li class="list-item">
              <el-row type="flex" justify="space-between" algn="center">
                <div>{{item.name}}</div>
                <div>{{item.distance}}</div>
              </el-row>
            </li>
          </swiper-slide>
        </swiper>

      </ul>
    </div>
    <div :style="chartsDom" v-if="!jz">
      <animae-jz  :style="chartsDom"></animae-jz>
    </div>
  </div>
</template>
<script>
import { get_TalentMonitor_LatestRecruitingCompanies } from '@/api/data'
export default {
  data() {
    return {
      listData: [],
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    chartsDom() {
      return {
        width: (document.documentElement.clientWidth-30)/4 - 15  + 'px',
        height: this.height - 30 - 10 + 'px',
        'z-index': 100,
        position: 'relative',
        overflow: 'hidden'
        // 'background-color': 'red'
      }
    }
  },
  mounted() {
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init() {
      this.jz=false
      get_TalentMonitor_LatestRecruitingCompanies(this.dateProp)
      .then(({data:{data}})=>{
        this.jz=true
        this.listData = data;
      });
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .list-content
    width 100%
    height 100%
    overflow hidden
    list-style none
  .list-item
    margin 0 15px
    background-color rgba(14,51,102,.5)
    padding 0 15px
    height 36px
    line-height 36px
    box-shadow 0 0 5px rgba(55,85,218,.3) inset
    margin-top 10px
    color rgba(255, 255, 255, 0.7)
    font-size 14px
    white-space nowrap
    div:first-child
      flex 1
      overflow hidden
      text-overflow ellipsis
    div:nth-child(2)
      width auto
</style>